
* {
  box-sizing: border-box;
}
/* TODO：待补充代码 */
#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}


#pond {
  z-index: 20;
}
/*flex 20% 盘子按列排 形成5 * 5的网格  */
#pond,
#fruit-background {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em;
}

.lilypad,
.fruit {
  
  position: relative;
  width: 20%;
  height: 20%;
  overflow: hidden;
}

.lilypad .bg,
.fruit .bg {
  /*width height 必须设置*/
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: 80% 80%; 
  background-repeat: no-repeat;
}
.fruit .bg{
  width: 100%;
  height: 100%;
  background-size: 30% 30%;
}


/* 设置图片*/


.lilypad.apple .bg {
  border-radius: 50%;
  background-image: url(../images/redplate.svg);
  opacity: 0.6;
}

.lilypad.banana .bg {
  border-radius: 50%;
  background-image: url(../images/yellowplate.svg);
  opacity: 0.6;
}

.lilypad.pear .bg {
  border-radius: 50%;
  opacity: 0.6;
  background-image: url(../images/blueplate.svg);
}
.fruit.apple .bg {
  background-image: url(../images/apple.svg);
}

.fruit.pear .bg {
  background-image: url(../images/pear.svg);
}

.fruit.banana .bg {
  background-image: url(../images/banana.svg);
}



* {
  box-sizing: border-box;
}

.fruit.apple .bg {
  background-image: url(../images/apple.svg);
}

.fruit.pear .bg {
  background-image: url(../images/pear.svg);
}

.fruit.banana .bg {
  background-image: url(../images/banana.svg);
}
/*  三个果盘  */
.lilypad.apple .bg {
  border-radius: 50%;
  background-image: url(../images/redplate.svg);
  opacity: 0.6;
}

.lilypad.banana .bg {
  border-radius: 50%;
  background-image: url(../images/yellowplate.svg);
  opacity: 0.6;
}

.lilypad.pear .bg {
  border-radius: 50%;
  opacity: 0.6;
  background-image: url(../images/blueplate.svg);
}

